<template>
  <!-- 同环环比 -->
  <view class="conter">
    <cc-date title='同环环比' text='选择时间' color='#fff' frist="日" second="月" third="季" fourth="年"></cc-date>
    <view class="navigation_head"></view>
    <uni-card>
      <navigator class="head" url="../chain_comparison_a/chain_comparison_a">
        徽州区
        <image src="../../static/organization_ranking/xl.png" mode=""></image>
      </navigator>
    </uni-card>
    <uni-card>
      <view class="card">
        2020年6月3日徽州区各企业厂界同环比
      </view>
      <view class="change_v">
        <view class="change_vv">
        </view>
        同比
        <view class="change_vc">
        </view>
        环比
      </view>
      <view class="region">
        <echarts :option="option" style="height: 300px;" @click="echartsClick"></echarts>
      </view>
    </uni-card>
    <uni-card>
      <view class="card">
        2020年6月3日徽州区各企业排口同环比
      </view>
      <view class="change_v">
        <view class="change_vv">
        </view>
        同比
        <view class="change_vc">
        </view>
        环比
      </view>
      <view class="region">
        <echarts :option="option1" style="height: 300px;" @click="echartsClick"></echarts>
      </view>
    </uni-card>
  </view>
</template>

<script>
  import echarts from '@/components/echarts/echarts.vue';
  export default {
    components: {
      echarts
    },
    data() {
      return {
        option:{
          // legend: {
          //     data: ['bar', 'bar2', 'bar3', 'bar4'],
          //     left: '10%'
          // },
          tooltip: {},
          xAxis: {
            data: ['永利', '保利', '绿地', '恒大', '金鱼'],
            name: '',
            axisLine: {
              onZero: true
            },
            splitLine: {
              show: false
            },
            splitArea: {
              show: false
            }
          },
          yAxis: {},
          grid: {
            // bottom: 100
          },
          series: [{
              name: 'bar',
              type: 'bar',
              stack: 'one',
              data: [0.79, 1.06, 0.75, 1.02, -0.52]
            },
            {
              name: 'bar4',
              type: 'bar',
              stack: 'two',
              data: [0.31, -0.5, -0.95, -0.32, -0.69]
            }
          ]
        },
        option1:{
          // legend: {
          //     data: ['bar', 'bar2', 'bar3', 'bar4'],
          //     left: '10%'
          // },
          tooltip: {},
          xAxis: {
            data: ['永利', '保利', '绿地', '恒大', '金鱼'],
            name: '',
            axisLine: {
              onZero: true
            },
            splitLine: {
              show: false
            },
            splitArea: {
              show: false
            }
          },
          yAxis: {},
          grid: {
            // bottom: 100
          },
          series: [{
              name: 'bar',
              type: 'bar',
              stack: 'one',
              data: [0.79, 1.06, 0.75, 1.02, -0.52]
            },
            {
              name: 'bar4',
              type: 'bar',
              stack: 'two',
              data: [0.31, -0.5, -0.95, -0.32, -0.69]
            }
          ]
        }
      }
    },
    methods: {
      /**
       * 点击事件
       * @param {Object} params
       */
      echartsClick(params) {
        console.log('点击数据', params)
      },
    }
  };
</script>

<style lang="scss">
  .navigation_head {
    height: calc(88rpx + var(--status-bar-height));
  }

  .conter {
    // height: 1572rpx;
    background: #F7F7F7;
    overflow: hidden;
  }

  .head {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;

    image {
      width: 22rpx;
      height: 12rpx;
      margin-left: 10rpx;
    }
  }

  .card {
    // width: 702rpx;
    // height: 544rpx;
    font-size: 26rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  .change_v {
    display: flex;
    align-items: center;
    margin: 34rpx 0 0 30rpx;
    font-size: 22rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #8C8C8C;
  }
  
  .change_vv {
    width: 20rpx;
    height: 15rpx;
    margin-right: 16rpx;
    background-color: #5B8FF9;
    // border-radius: 50%;
  }
  .change_vc {
    width: 20rpx;
    height: 15rpx;
    margin: 0 16rpx 0 36rpx;
    background-color: #5AD7A6;
    // border-radius: 50%;
  }
  // .region{
  //   transform: translateY(-10%);
  // }
</style>
